<template>
  <div id="app">
    <el-container>
      <el-header height="70">
        <huadi-header>
        </huadi-header>
      </el-header>
      <el-container>
        <el-aside width="240">
          <timer></timer>
          <huadi-aside>
          </huadi-aside>
        </el-aside>
        <el-main>
          <div class="breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-for="breadcrumb in breadcrumbs" key= index router="breadcrumb.router" >{{breadcrumb.name}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import ElHeader from "../node_modules/element-ui/packages/header/src/main";
  import ElAside from "../node_modules/element-ui/packages/aside/src/main";
  import header from './components/header/Header.vue';
  import huadiAside from './components/aside/Aside.vue';
  import huadiHeader from '@/components/header/Header';
  import timer from '@/components/aside/Timer';
export default {
  components: {
    'el-aside':ElAside,
    'el-header':ElHeader,
    'huadi-aside':huadiAside,
    'huadi-header':huadiHeader,
    'timer':timer
  },
  name: 'app',
  computed:{
    breadcrumbs:{
        get(){
          return this.$store.state.breadcrumb.breadcrumbs;
        },
      set(){

      }
    }
  }
}
</script>

<style>
*{
  font-family: 华文细黑;
}

  /*全局*/
  .el-menu-item{
    background-color:#f6f8f8!important;
    color:#666!important;
  }
.el-pagination > .btn-prev{
  border:1px solid #fcfcfc;
  margin-right:1px;
  width:30px;
  height:29px;
  border-top-left-radius:3px ;
  border-bottom-left-radius:3px;
}
.el-pagination > .btn-next{
  border:1px solid #fcfcfc;
  width:30px;
  height:29px;
  margin-left:1px;
  border-top-right-radius:3px ;
  border-bottom-right-radius:3px;
}
.el-pagination > .el-pager> .active{
  border:1px solid #fcfcfc;
  background:#2196f3!important;
  width:30px;
  height:29px;
  border-radius:3px;
  color:white;
}
.el-pagination > .el-pager> .number{
  border:1px solid #fcfcfc;
  width:30px;
  height:29px;
  background:white;
  border-radius: 3px;
}

.table-header{
  background-color:red;
}
  #app {
  width:100%;
  height:100%;
}
.el-header{
  height:70px;
  background-color: #2196F3;
  box-shadow: 0px 2px 4px rgba(51,94,127,0.75);
  position: fixed;
  left:0;
  right:0;
  z-index: 100;
}

.el-aside {
  position: absolute;
  left:0px;
  bottom:0px;
  top:70px;
  width:240px;
  background:#fff;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  position: absolute;
  right:0px;
  left:240px;
  bottom:0px;
  top:70px;
}

body > .el-container {
  margin-bottom: 0px;
  background:#eaedf1;
}

.breadcrumb{
  margin-top:-6px;
  margin-bottom: 32px;
}
  .el-main{
    padding:40px;
  }
  .is-active:before{
    content: " ";
    width:4px;
    height:50px;
    background:#2196F3;
    position: absolute;
    left:0px;
    top:0px;
  }
</style>
